<template>
	<div class="approve-manager-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-row :gutter="24">
					<el-col :span="20">
						<!-- 语言动态标签页面 -->
						<elTabPane :isShow="isTag" :tagId="tagId" @tagClick="tagClick"></elTabPane>
					</el-col>
				</el-row>
				<div class="menuTItle">
					<el-button size="medium" :type="type === 1 ? 'primary' : ''" round @click.stop="getBtn(1)">
						<div class="typeNum">1</div>{{ $t('text.baseSetup') }}
					</el-button>
					<el-button size="medium" :type="type === 2 ? 'primary' : ''" round @click.stop="getBtn(2)">
						<div class="typeNum">2</div>{{ $t('text.processSetup') }}
					</el-button>
				</div>
				<el-form ref="info" :model="info" :rules="rules" class="demo-ruleForm">
					<el-form v-for="(info, index) in info.list" :ref="`info${index}`" label-width="130px" :model="info"
						:rules="rules" v-show="tagId === info.langId" :key="index" class=" demo-ruleForm">
						<div class="content_info">
							<div class="box" :style="{ 'width': type === 1 ? '560' + 'px' : '100%' }">
								<template v-if="propUpType === 'add' || propUpType === 'edit'">
									<template v-if="type === 1">
										<el-form-item :label="$t('publicFormLabel.name')" prop="name">
											<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
										<el-form-item :label="$t('formLabel.groupSelection')" prop="groupId">
											<el-select v-model="info.groupId" clearable :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%" @change="copyValue('list', 'groupId', info.groupId)">
												<el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
										<el-form-item :label="$t('formLabel.approvalType')" prop="type">
											<el-select v-model="info.type" filterable clearable :placeholder="$t('placeholderTip.pSelect')"
												@change="copyValue('list', 'type', info.type)" style="width:100%">
												<el-option v-for="item in approvalTypeList" :key="item.value" :label="item.name"
													:value="item.type" />
											</el-select>
											<div style="color:#909399;font-size:13px;">
												<i class="el-icon-warning" style="color:#DFB771"></i>
												{{ $t('text.approvalTip') }}
											</div>
										</el-form-item>
										<el-form-item :label="$t('publicFormLabel.remark')" prop="describe">
											<el-input v-model="info.describe" type="textarea"
												@change="copyValue('list', 'describe', info.describe)"
												:placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
										<el-form-item :label="$t('publicFormLabel.status')" prop="status">
											<el-radio-group v-model="info.status" @change="copyValue('list', 'status', info.status)">
												<el-radio :label=1>{{ $t('publicBtn.enable') }}</el-radio>
												<el-radio :label=0>{{ $t('publicBtn.disable') }}</el-radio>
											</el-radio-group>
										</el-form-item>
									</template>
									<template v-if="type === 2">
										<div class="approval-flow fd-nav-content">
											<div class="dingflow-design">
												<div id="box-scale" class="box-scale"
													:style="'transform: scale(' + nowVal / 100 + '); transform-origin: 50% 0px 0px;'">
													<nodeWrap v-bind="$attrs" :node-config="info.processList" @getData="getData"
														:is-tried="isTried" />
													<div style="text-align:center;font-size:12px;color:#333;font-weight: 400;">
														<p>{{ $t('text.processEnd') }}</p>
													</div>
												</div>
											</div>
										</div>
									</template>
								</template>
								<template v-if="propUpType === 'detail'">
									<template v-if="type === 1">
										<el-form-item :label="$t('publicFormLabel.name')" prop="name">
											<el-input readonly :value="info.name" />
										</el-form-item>
										<el-form-item :label="$t('formLabel.groupSelection')" prop="groupId">
											<el-input readonly :value="info.groupName" />
										</el-form-item>
										<el-form-item :label="$t('formLabel.approvalType')" prop="type">
											<el-select :disabled="true" :value="info.type" clearable style="width:100%">
												<el-option v-for="item in approvalTypeList" :key="item.value" :label="item.name"
													:value="item.type" />
											</el-select>
										</el-form-item>
										<el-form-item :label="$t('publicFormLabel.remark')" prop="describe">
											<el-input readonly :value="info.describe" type="textarea" />
										</el-form-item>
										<el-form-item :label="$t('publicFormLabel.status')" prop="status">
											<el-radio-group :value="info.status">
												<el-radio v-if="info.status === 1" :label=1>{{ $t('publicBtn.enable') }}</el-radio>
												<el-radio v-if="info.status === 0" :label=0>{{ $t('publicBtn.disable') }}</el-radio>
											</el-radio-group>
										</el-form-item>
									</template>
									<template v-if="type === 2">
										<div class="approval-flow fd-nav-content">
											<div class="dingflow-design">
												<div id="box-scale" class="box-scale"
													:style="'transform: scale(' + nowVal / 100 + '); transform-origin: 50% 0px 0px;'">
													<nodeWrap v-bind="$attrs" :node-config="info.processList" :is-tried="isTried"
														:propuptype="propUpType" />
													<div style="text-align:center;font-size:12px;color:#333;font-weight: 400;">
														<p>{{ $t('text.processEnd') }}</p>
													</div>
												</div>
											</div>
										</div>
									</template>
								</template>
							</div>
						</div>
					</el-form>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="type === 2" type="primary" @click="getBtn(1)">{{ $t('text.previouStep') }}</el-button>
					<el-button v-if="type === 1" type="primary" @click="getBtn(2)">{{ $t('text.nextSteps') }}</el-button>
					<el-button v-if="propUpType !== 'detail' && type === 2" type="primary" @click.stop="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	setApprovalSave,
	getApprovalInfo,
	setApprovalUpdate,
	getApprovalType,
	getApprovalGroupList
} from '@/api/basics-manager'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'
import nodeWrap from '@/components/Approve/nodeWrap'
import elTabPane from '@/components/el-tab-pane/index'; //语言动态标签页面
export default {
	name: 'ApproveManagerInfo',
	components: {
		UploadImg: UploadImgSimple,
		nodeWrap,
		elTabPane
	},
	data() {
		return {
			tagId: '',//语言id 默认id 
			isTag: false,
			flag: false,
			info: {
				list: []
			},
			// 流程设置
			isTried: false,
			nowVal: 100,
			propUpType: '', // 'add' edit detail
			approvalTypeList: [],
			groupList: [],
			processList: [],//审批流
			rules: {
				groupId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				type: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				]
			},
			type: 1,
			fullscreenLoading: false
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		this.tagId = this.languageId
		this.isTag = true
		if (this.$route.query.propUpType === 'add') {
			this.info = { list: [] }
			this.resetForm('info', 1) //重置表单
			this.$nextTick(() => {
				this.info.list = this.setFormData()
			})
			this.propUpType = 'add'

		} else if (this.$route.query.id) {
			this.getInfo(this.$route.query.id)
		}
		this.init()
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		// 语言菜单处理
		tagClick(id) {
			if (id !== this.tagId) {
				this.resetForm('info', 2)
				this.tagId = id
			}
		},
		// 多表单处理
		setFormData() {
			var arr = []
			this.languageList.map(i => {
				var obj = {
					langId: i.id,
					name: '', // 名称-多语言
					groupId: '', //组id
					group: '', //组名称
					type: '', // 审批类型
					describe: '', // 备注
					status: 1,// 状态  0:禁用 1:启用
					processList: [
						{
							launches: [
								// {
								//   launchName: '', // 发起人
								//   launchId: '', //	发起Id
								//   type:'' //类型 1:员工 2:部门
								// }
							],
							launchNames: '', // 发起人
							launchIds: '', //	发起Id
							launchType: 0, //发起人类型 0:（所有人） 和非0： 区别
							type: 0 // 0 发起人  1 审批人  2抄送人
						},
						{
							examines: [
								// {
								//   examineName: '', // 审批人
								//   examineId: '', // 审批人id
								// }
							],
							examineType: 1, // 审批人类型   1:员工 2:角色 3:职位 4:发起人自己 5:发起人自选
							examineNames: '', // 审批人
							examineIds: '', // 审批人id
							examineWay: '', // 多人审批方式 1:会签 2:或签
							examineRange: '', // 选择范围（发起人自选） 1:全公司 2:指定成员 3:角色
							examineCross: 0, // 是否跨店  0:否 1:是
							examineOptional: 0, // 可选多人（发起人自选） 0:否 1:是
							type: 1 // //0 发起人  1 审批人  2抄送人
						}
						// {
						//   ccs: [
						//     // {
						//     //   ccId: '', // 抄送人Id
						//     //   ccName: '', // 抄送人
						//     //   type:'' //类型 1:员工 2:部门
						//     // }
						//   ],
						//   ccIds: '', // 抄送人Id
						//   ccNames: '', // 抄送人
						//   ccOptional: 1, //发起人自选抄送人 0:否 1:是
						//   type: 2 // //0 发起人  1 审批人  2抄送人
						// }
					],
				}
				arr.push(obj)
			})
			return arr
		},

		// 重置表单
		resetForm(vaid, type) {
			// type 1 重置表单 2仅清空校验
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					Promise.all([
						//数组部分的表单，用map返回验证函数的调用
						...this.info.list.map((item, index) => {
							var refs = `info${index}`
							let valiForm = this.$refs?.[refs].validate
								? this.$refs?.[refs]
								: this.$refs?.[refs][0];
							if (type === 1) {
								valiForm.resetFields()
							} else {
								valiForm.clearValidate()
							}
						})
					])
				})
			}
		},
		//  赋值
		getData(obj, index) {
			this.info.list.map((i) => {
				i.processList[index] = obj
			})
		},

		// 无多语言字段处理
		copyValue(key, key2, value) {
			this.info[key].map(i => {
				i[key2] = value
			})
		},

		getBtn(type) {
			if (this.propUpType !== 'detail' && this.type === 1) {
				for (var i = 0; i < this.info.list.length; i++) {
					var item = this.info.list[i]
					var index = i
					// 当前语种 表单校验
					if (this.tagId === item.langId) {
						let valiForm = this.$refs?.[`info${index}`].validate
							? this.$refs?.[`info${index}`]
							: this.$refs?.[`info${index}`][0];
						valiForm.validate((res) => {
							if (res) {
								this.type = 2
							} else {
								return false
							}
						})
					}
				}
			} else {
				this.type = type
			}
		},
		init() {
			// 审批组
			if (this.propUpType !== 'detail') {
				getApprovalGroupList('&status=1').then(res => {
					if (res.code === 200) {
						this.groupList = res.data.list
					}
				})
			}
			// 审批类型
			getApprovalType().then(res => {
				if (res.code === 200) {
					this.approvalTypeList = res.data
				}
			})
		},

		// 提交添加角色
		addSubmitForm() {
			var list = JSON.parse(JSON.stringify(this.info.list))
			var flag = false
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				var index = i
				// 当前语种 表单校验every
				if (this.tagId === item.langId) {
					let valiForm = this.$refs?.[`info${index}`].validate
						? this.$refs?.[`info${index}`]
						: this.$refs?.[`info${index}`][0];
					valiForm.validate((res) => {
						if (res) {
							flag = true // 一个多语言字段 直接校验当前表单 
							// flag = this.getCheck(index) //多个对语言 需要校验其他语种表单
						} else {
							return false
						}
					})
				}
			}
			if (flag) {
				var flag1 = this.checkData()
				if (flag1) {
					var arr = JSON.parse(JSON.stringify(this.info.list))
					var groupName = ''
					this.groupList.filter(item => {
						if (arr[0].groupId === item.id) {
							groupName = item.name
						}
					})
					// 组名称处理
					arr.map((i) => {
						i.group = groupName
					})
					this.fullscreenLoading = true
					if (this.propUpType === 'add') {
						setApprovalSave({ t: arr })
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.addSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(() => {
								this.fullscreenLoading = false
								this.getCheckData(this.info.list[0].processList)
							})
					} else {
						setApprovalUpdate({ t: arr })
							.then(res => {
								if (res.code === 200) {
									this.$message({
										message: this.$t('text.editSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(() => {
								this.fullscreenLoading = false
								this.getCheckData(this.info.list[0].processList)
							})
					}
				} else {
					this.getCheckData(this.info.list[0].processList)
				}
			}

		},
		// 处理数据
		checkData() {
			var typeList = []
			// 取取第一个表单进行 校验及其数据处理
			var newNodeConfig = this.info.list[0].processList
			newNodeConfig.filter(i => {
				typeList.push(i.type)
			})
			if (typeList.indexOf(1) === -1) {
				this.$message({
					message: this.$t('text.setNode'),
					type: 'warning'
				})
				return false
			}
			for (var i = 0; i < newNodeConfig.length; i++) {
				var item = newNodeConfig[i]
				if (Number(item.type) === 0) {
					if (item.launchType !== 0) {
						var keyMap = {
							name: 'launchName',
							id: 'launchId'
						}

						// +++++下划线id处理+++++++++
						item.launchIds = [] //处理launchIds 下划线id
						// +++++++++++++

						var newList = item.launches
						for (var j = 0; j < newList.length; j++) {
							var newObj = newList[j]
							for (var key in newObj) {
								var newKey = keyMap[key]
								if (newKey) {
									newObj[newKey] = newObj[key]
									delete newObj[key]
								}
							}

							// +++++下划线id处理+++++++++
							// 重复id + 下划线 + type  id处理  将下划线id处理
							newObj.launchId = newObj.launchId.toString()
							if (newObj.launchId.indexOf('_') === -1) {
								// 不包含下划线id
								newObj.launchId = newObj.launchId

							} else {
								// 包含 下划线
								newObj.launchId = newObj.launchId.split('_')[0]
							}
							item.launchIds.push(newObj.launchId) //重组id 处理
							// ++++++++++++++
						}

						// +++++下划线id处理+++++++++
						item.launchIds = item.launchIds.toString()
						// ++++++++++++++

						item.launches = newList
					}
				}
				if (Number(item.type) === 1) {
					if (item.examineType === '' || !item.examineNames) {
						this.$message({
							message: this.$t('placeholderTip.pApprover'),
							type: 'warning'
						})
						return false
					}
					if (Number(item.examineType) === 1) {
						var keyMap = {
							name: 'examineName',
							id: 'examineId'
						}
						var newList = item.examines
						for (var j1 = 0; j1 < newList.length; j1++) {
							var newObj = newList[j1]
							for (var key in newObj) {
								var newKey = keyMap[key]
								if (newKey) {
									newObj[newKey] = newObj[key]
									delete newObj[key]
								}
							}
						}
						item.examines = newList
					}
				}
				if (Number(item.type) === 2) {
					if (item.ccs.length === 0) {
						this.$message({
							message: this.$t('placeholderTip.pCcTo'),
							type: 'warning'
						})
						return false
					}
					var keyMap = {
						name: 'ccName',
						id: 'ccId'
					}
					var newList = item.ccs
					for (var j2 = 0; j2 < newList.length; j2++) {
						var newObj = newList[j2]
						for (var key in newObj) {
							var newKey = keyMap[key]
							if (newKey) {
								newObj[newKey] = newObj[key]
								delete newObj[key]
							}
						}
					}
					item.ccs = newList
				}
			}

			// 同步 审批 processList 数据
			this.info.list.map(i => {
				i.processList = newNodeConfig
			})

			return true
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getApprovalInfo(id).then(res => {
				if (res.code === 200) {
					var arr = res.data.t || []
					// 处理 id  防止相同id
					if (this.propUpType === 'edit') {
						for (var i = 0; i < arr.length; i++) {
							var item = arr[i]
							var el = item.processList
							for (var j = 0; j < el.length; j++) {
								var el = el[j]
								if (el.launchIds) {
									el.launchIds = []
								} else {
									el.launchIds = el.launchIds || []
								}
								if (el.launches && el.launches.length > 0) {
									el.launches.map(z => {
										if (z.type !== 1) {
											z.launchId = z.launchId + '_' + z.type
											el.launchIds.push(z.launchId)
										} else {
											el.launchIds.push(z.launchId)
										}
									})
								}

								el.launchIds = el.launchIds.toString()
							}
						}

					}
					if (arr.length > 0) {
						this.setInfoData(arr)
					}
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},

		// 详情数据处理
		async setInfoData(data) {
			this.$nextTick(() => {
				var newArr = []
				var arr = data
				var obj = arr[0]
				// console.log(obj.processList, '++++++=')
				if (this.propUpType !== 'detail') {
					this.languageList.map(i => {
						var obj_1 = {
							langId: i.id,
							id: obj.id,
							branchId: obj.branchId,//集团id
							companyId: obj.companyId,//门店id
							name: '', // 名称-多语言
							groupId: obj.groupId, //组id
							group: obj.group, //组名称
							type: obj.type, // 审批类型
							describe: obj.describe, // 备注
							status: obj.status,// 状态  0:禁用 1:启用
							processList: obj.processList //审批
						}
						newArr.push(obj_1)
					})
				} else {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: '',
							branchId: '',//集团id
							companyId: '',//门店id
							name: '', // 名称-多语言
							groupId: '', //组id
							group: '', //组名称
							type: '', // 审批类型
							describe: '', // 备注
							status: 1,// 状态  0:禁用 1:启用
							processList: [
								{
									launches: [
									],
									launchNames: '', // 发起人
									launchIds: '', //	发起Id
									launchType: 0, //发起人类型 0:（所有人） 和非0： 区别
									type: 0 // 0 发起人  1 审批人  2抄送人
								},
								{
									examines: [

									],
									examineType: 1, // 审批人类型   1:员工 2:角色 3:职位 4:发起人自己 5:发起人自选
									examineNames: '', // 审批人
									examineIds: '', // 审批人id
									examineWay: '', // 多人审批方式 1:会签 2:或签
									examineRange: '', // 选择范围（发起人自选） 1:全公司 2:指定成员 3:角色
									examineCross: 0, // 是否跨店  0:否 1:是
									examineOptional: 0, // 可选多人（发起人自选） 0:否 1:是
									type: 1 // //0 发起人  1 审批人  2抄送人
								}
							]
						}
						newArr.push(obj)
					})
				}
				arr.map(j => {
					// 根据id进行对象替换
					let index = newArr.findIndex(e =>
						e.langId == j.langId
					)
					if (index > -1) {
						// 替换对象
						newArr[index] = j
					}
				})
				this.info.list = newArr
				this.getCheckData(data[0].processList) //处理审批 数组

			})
		},
		getCheckData(list) {
			var data = list
			for (var i = 0; i < data.length; i++) {
				var item = data[i]
				if (item.type === 0) {
					if (item.launchType !== 0) {
						var keyMap = {
							launchName: 'name',
							launchId: 'id'
						}
						var newList = item.launches
						if (newList) {
							for (var j = 0; j < newList.length; j++) {
								var newObj = newList[j]
								for (var key in newObj) {
									var newKey = keyMap[key]
									if (newKey) {
										newObj[newKey] = newObj[key]
										delete newObj[key]
									}
								}
							}
							item.launches = newList
						}
					}
				}
				if (item.type === 1) {
					if (item.examineType === 1) {
						var keyMap = {
							examineName: 'name',
							examineId: 'id'
						}
						var newList = item.examines
						if (newList) {
							for (var j1 = 0; j1 < newList.length; j1++) {
								var newObj = newList[j1]
								for (var key in newObj) {
									var newKey = keyMap[key]
									if (newKey) {
										newObj[newKey] = newObj[key]
										delete newObj[key]
									}
								}
							}
							item.examines = newList
						}
					} else if (item.examineType === 2 || item.examineType === 3) {
						item.examineIds = Number(item.examineIds)
					}
				}
				if (item.type === 2) {
					var keyMap = {
						ccName: 'name',
						ccId: 'id'
					}
					var newList = item.ccs
					if (newList) {
						for (var j2 = 0; j2 < newList.length; j2++) {
							var newObj = newList[j2]
							for (var key in newObj) {
								var newKey = keyMap[key]
								if (newKey) {
									newObj[newKey] = newObj[key]
									delete newObj[key]
								}
							}
						}
						item.ccs = newList
					}
				}
			}
			// 同步表单审理数据
			this.info.list.map(i => {
				i.processList = data
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.approve-manager-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.menuTItle {
				margin-top: 20px;
				width: 100%;
				height: auto;
				display: flex;
				color: #000 !important;
				justify-content: center;

				::v-deep .typeNum {
					width: 14px;
					height: 14px;
					border-radius: 50%;
					border: 1px solid #111111;
					display: inline-block;
					margin-right: 6px;
					font-size: 12px;
				}

				.el-button--medium.is-round {
					color: #000;
				}
			}

			&>.el-form {
				width: 100%;
				height: calc(100% - 164px);
				margin-top: 20px;
				overflow: hidden;

				&>.el-form {
					width: 100%;
					height: 100%;

					&>.content_info {
						width: 100%;
						height: calc(100% - 76px);
						padding: 20px;
						overflow: hidden;

						&>.box {
							width: 100%;
							height: 100%;
							margin: 0 auto;
							overflow-x: hidden;
							overflow-y: scroll;
							white-space: nowrap;
						}

						::-webkit-scrollbar {
							width: 0 !important;
						}

						::-webkit-scrollbar {
							width: 0 !important;
							height: 0 !important;
						}
					}
				}
			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.avatar-uploader {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				width: 104px;
				height: 104px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				float: left;
			}

			.tipInfo {
				height: 104px;
				display: flex;
				align-items: flex-end;
				color: #999999;
				font-size: 14px;
				margin-left: 13px;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409eff;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 104px;
				height: 104px;
				line-height: 104px;
				text-align: center;
			}

			.avatar {
				width: 104px;
				height: 104px;
				display: block;
			}

			.el-avatar {
				img {
					width: 100%;
					height: 100%;
				}
			}

			.deleteImg {
				position: absolute;
				top: -10px;
				left: 92px;
				cursor: pointer;

				&>img {
					width: 20px;
					height: 20px;
				}

				&>.el-icon-error {
					font-size: 18px;
					color: #dfb771;
					overflow: hidden;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
<style lang="scss">
.btn-style {
	position: fixed;
	right: 60px;
}

.approval-flow {
	display: flex;
	justify-content: center;
	padding-bottom: 10px;

	.dingflow-design {
		.box-scale {
			transform: scale(1);
			display: inline-block;
			position: relative;
			width: 100%;
			transform-origin: 0 0 0;

			.branch-wrap {
				.branch-box-wrap {
					margin-left: -240px;

					.auto-judge {
						position: relative;
						width: 280px;
						min-height: 100px;
						background: #fff;
						border-radius: 4px;
						cursor: pointer;

						.title-wrapper {
							position: relative;
							font-size: 12px;
							color: #333;
							text-align: left;
							height: 38px;
							line-height: 38px;
							padding: 0 13px 0 0px;
							border-bottom: 1px solid #ebebeb;
						}
					}
				}
			}

			.node-wrap-box {
				display: inline-flex;
				flex-direction: column;
				position: relative;
				width: 280px;
				min-height: 72px;
				border-radius: 4px;
				cursor: pointer;
			}

			.node-wrap-box .box {
				background: #fff;
				box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
			}

			//  .node-wrap-box .box:after {
			//   pointer-events: none;
			//   content: '';
			//   position: absolute;
			//   top: 0;
			//   bottom: 0;
			//   left: 0;
			//   right: 0;
			//   z-index: 2;
			//   border-radius: 4px;
			//   border: 1px solid transparent;
			//   transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
			// }

			.end-node {
				justify-content: center;
				flex-direction: column;

				p {
					width: 110px;
					height: 40px;
					line-height: 40px;
					color: #fff;
					text-align: center;
					background-color: #8cafff;
					border-radius: 4px;
					font-size: 14px;
					margin: 0 auto;
				}
			}
		}
	}
}

.fd-nav-content {}

.dingflow-design {}

.editable-title {
	font-size: 14px;
	padding-left: 6px;
}

.dingflow-design .ie-polyfill-container {
	display: -ms-grid;
	-ms-grid-columns: min-content;
}

.dingflow-design .node-wrap {
	flex-direction: column;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	// padding: 0 50px;
	position: relative;
}

.dingflow-design .branch-wrap,
.dingflow-design .node-wrap {
	display: inline-flex;
	// width: 100%;
}

.dingflow-design .branch-box-wrap {
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	min-height: 270px;
	width: 100%;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.dingflow-design .branch-box {
	display: flex;
	overflow: visible;
	min-height: 180px;
	height: auto;
	border-bottom: 1px solid #ebebeb;
	border-top: 1px solid #ebebeb;
	position: relative;
	margin-top: 15px;
}

.dingflow-design .branch-box .col-box:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	margin: auto;
	width: 1px;
	height: 100%;
	background-color: #ebebeb;
}

.dingflow-design .add-branch {
	border: none;
	outline: none;
	user-select: none;
	justify-content: center;
	font-size: 12px;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	color: #4880ff;
	background: #fff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: center center;
	cursor: pointer;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.dingflow-design .add-branch:hover {
	transform: translateX(-50%) scale(1.1);
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}

.dingflow-design .add-branch:active {
	transform: translateX(-50%);
	box-shadow: none;
}

.dingflow-design .col-box {
	display: inline-flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	position: relative;
}

.dingflow-design .auto-judge:after {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	border-radius: 4px;
	border: 1px solid transparent;
	transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.dingflow-design .auto-judge.active:after,
.dingflow-design .auto-judge:active:after,
.dingflow-design .auto-judge:hover:after {
	border: 1px solid #4880ff;
	box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

.dingflow-design .auto-judge.active .close,
.dingflow-design .auto-judge:active .close,
.dingflow-design .auto-judge:hover .close {
	display: block;
}

.dingflow-design .auto-judge.error:after {
	border: 1px solid #f25643;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.dingflow-design .auto-judge .placeholder {
	color: #bfbfbf;
}

.dingflow-design .auto-judge .close {
	display: none;
	position: absolute;
	right: 22px;
	top: 8px;
	width: 20px;
	height: 20px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
	z-index: 2;
}

.dingflow-design .auto-judge .content {
	height: calc(100% - 39px);
	display: flex;
	align-items: center;
	max-width: calc(100% - 36px);
	padding: 0 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
}

.dingflow-design .auto-judge .sort-left,
.dingflow-design .auto-judge .sort-right {
	position: absolute;
	top: 0;
	bottom: 0;
	display: none;
	z-index: 1;
	color: rgba(0, 0, 0, 0.25);
}

.dingflow-design .auto-judge .sort-left {
	left: 4px;
	top: 33px;
	color: rgba(0, 0, 0, 0.5);
}

.dingflow-design .auto-judge .sort-right {
	right: 26px;
	top: 33px;
}

.dingflow-design .auto-judge:hover .sort-left,
.dingflow-design .auto-judge:hover .sort-right {
	display: flex;
	align-items: center;
}

.dingflow-design .add-node-btn {
	user-select: none;
	width: 240px;
	padding: 30px 0;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	flex-shrink: 0;
	-webkit-box-flex: 1;
	flex-grow: 1;
	// margin-left: -55px;
}

.dingflow-design .add-node-btn .btn {
	outline: none;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	width: 30px;
	height: 30px;
	background: #dfb771;
	border-radius: 50%;
	position: relative;
	border: none;
	line-height: 30px;
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	// margin-left: 36px;
}

.dingflow-design .add-node-btn .btn .iconfont {
	color: #fff;
	font-size: 16px;
}

.dingflow-design .add-node-btn .btn:hover {
	transform: scale(1.3);
	box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
}

.dingflow-design .add-node-btn .btn:active {
	transform: none;
	background: #1e83e9;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.top-left-cover-line {
	left: -1px;
}

.top-left-cover-line,
.top-right-cover-line {
	position: absolute;
	height: 3px;
	width: 50%;
	background-color: #f5f8ff;
	top: -2px;
}

.top-right-cover-line {
	right: -1px;
}

.bottom-left-cover-line {
	left: -1px;
}

.bottom-left-cover-line,
.bottom-right-cover-line {
	position: absolute;
	height: 3px;
	width: 50%;
	background-color: #f5f8ff;
	bottom: -2px;
}

.bottom-right-cover-line {
	right: -1px;
}

.node-wrap-box .box.active:after,
.node-wrap-box .box:active:after,
.node-wrap-box .box:hover:after {
	border: 1px solid #3296fa;
	box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

.node-wrap-box .box.active .close,
.node-wrap-box .box:active .close,
.node-wrap-box .box:hover .close {
	display: block;
}

.node-wrap-box .box .error:after {
	border: 1px solid #f25643;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.node-wrap-box .box .title {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 10px;
	// padding-right: 30px;
	// width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	color: #fff;
	text-align: left;
	background: #576a95;
	border-radius: 4px 4px 0 0;
}

.node-wrap-box .box .title .iconfont {
	font-size: 12px;
	margin-right: 5px;
}

.node-wrap-box .box .placeholder {
	color: #bfbfbf;
}

.node-wrap-box .box .close {
	display: none;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	font-size: 14px;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
}

.node-wrap-box .box .content {
	position: relative;
	font-size: 14px;
	padding: 20px 18px;
	padding-right: 30px;
}

.node-wrap-box .box .content .text {
	overflow: hidden;
	white-space: break-spaces;
	line-height: 20px;
	// text-overflow: ellipsis;
	// display: -webkit-box;
	// -webkit-line-clamp: 3;
	// -webkit-box-orient: vertical;
}

.node-wrap-box .box .content .arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 14px;
	font-size: 14px;
	color: #979797;
}

.start-node.node-wrap-box .box .content .text {
	display: block;
	white-space: nowrap;
}
</style>
